Functional Components and Component Composition in React Native

Course: React Native Training

Topic: Functional Components and Component Composition

Course Link: React Native Training Course

Demo Registration: Register for a Course Demo

JustAcademy Website: Visit JustAcademy

1. Introduction to Functional Components

Functional components are one of the most common ways to create user interfaces in React and React Native. A functional component is a JavaScript or TypeScript function that returns React elements describing the interface that should be displayed.

In React Native, functional components use built-in components such as View, Text, Image, TextInput, and Pressable to construct mobile application screens.

Functional components can receive data through props, manage changing values through state, respond to user interactions, and use hooks to work with React features.

1.1 Definition of a Functional Component

A functional component is a function that returns JSX or another valid React node. JSX is a syntax extension that makes it easier to describe a component's UI using markup-like syntax.

Example:

import React from 'react';
import { View, Text } from 'react-native';

function WelcomeMessage() {
  return (
    <View>
      <Text>Welcome to React Native!</Text>
    </View>
  );
}

export default WelcomeMessage;

In this example, WelcomeMessage is a functional component. It returns a View container containing a Text component.

1.2 Why Are Functional Components Important?

• They provide a straightforward way to define UI elements.
• They support reusable and modular application design.
• They work with React hooks such as useState and useEffect.
• They make it easier to separate UI responsibilities into smaller units.
• They support composition, allowing small components to build complete screens.
• They are the preferred component style for most new React Native development.

2. Basic Structure of a Functional Component

A functional component generally includes a function declaration, optional props or hooks, a return statement containing JSX, and an export statement when the component needs to be imported elsewhere.

2.1 Component Structure

import React from 'react';
import { View, Text } from 'react-native';

function Greeting() {
  const message = 'Hello, Learner!';

  return (
    <View>
      <Text>{message}</Text>
    </View>
  );
}

export default Greeting;

2.2 Explanation of the Code

• import React from 'react' imports React. Whether this explicit import is required for JSX depends on the project's tooling.
• import { View, Text } from 'react-native' imports the components used to build the mobile interface.
• function Greeting() defines the functional component.
• const message stores the text that will be displayed.
• return specifies the React elements the component renders.
• {message} inserts the JavaScript variable into JSX.
• export default Greeting makes the component available to other files.

2.3 Rules for Writing Components

• Component names should start with an uppercase letter, such as Greeting or ProfileCard.
• Return valid React elements or another valid React node.
• Close JSX tags correctly.
• Use React Native components for mobile interfaces rather than HTML elements such as div and p.
• Keep each component focused on a clear responsibility.
• Call hooks only at the top level of function components or custom hooks.
• Avoid changing props or state directly.

3. Functional Components with Props

Props, short for properties, allow a parent component to pass information to a child component. They make functional components reusable because the same component can display different content depending on the values it receives.

3.1 Example: Greeting Component with Props

import React from 'react';
import { View, Text } from 'react-native';

function Greeting({ name }) {
  return (
    <View>
      <Text>Hello, {name}!</Text>
    </View>
  );
}

function App() {
  return (
    <View>
      <Greeting name="Asha" />
      <Greeting name="Rahul" />
      <Greeting name="Priya" />
    </View>
  );
}

export default App;

3.2 How Props Work

1. The parent component renders the Greeting component.
2. The parent passes a value through the name prop.
3. The child receives the value through its function parameter.
4. The component uses the value inside JSX.
5. The same component can display greetings for different people.

3.3 Destructuring Props

Destructuring lets a component extract the required values directly from its props object. It can make the component code easier to read.

function UserCard({ name, role, city }) {
  return (
    <View>
      <Text>Name: {name}</Text>
      <Text>Role: {role}</Text>
      <Text>City: {city}</Text>
    </View>
  );
}

3.4 Default Values for Props

Default values can be assigned during parameter destructuring. They are used when the corresponding prop is missing or has the value undefined.

function WelcomeCard({ name = 'Guest' }) {
  return (
    <View>
      <Text>Welcome, {name}!

      </View>
  );
}

When no name prop is supplied, the component displays “Welcome, Guest!”.

4. Functional Components with State

State is data that can change over time and influence what a component displays. In function components, the useState hook is commonly used to declare state variables and update them.

4.1 Understanding useState

The useState hook returns two values: the current state and a setter function used to request an update.

const [count, setCount] = useState(0);

• count contains the current state value.
• setCount requests a state update.
• 0 is the initial value.

4.2 Example: Counter Component

import React, { useState } from 'react';
import { View, Text, Pressable, StyleSheet } from 'react-native';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.counterText}>Count: {count}</Text>
      <Pressable
        style={styles.button}
        onPress={() => setCount(previous => previous + 1)}
      >
        <Text style={styles.buttonText}>Increase</Text>
      </Pressable>
      <Pressable
        style={styles.button}
        onPress={() => setCount(previous => previous - 1)}
      >
        <Text style={styles.buttonText}>Decrease</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  counterText: {
    fontSize: 24,
    marginBottom: 16,
  },
  button: {
    padding: 12,
    marginVertical: 6,
    backgroundColor: '#2563eb',
    borderRadius: 6,
  },
  buttonText: {
    color: '#ffffff',
    fontWeight: 'bold',
  },
});

export default Counter;

4.3 Explanation

• The useState(0) call initializes the counter to zero.
• The current count appears in the Text component.
• The onPress handler runs when the user presses a button.
• The setter updates the state, and React renders the new value.
• The functional updater form uses the previous state to calculate the next value.

4.4 Important State Rules

• Do not modify state variables directly.
• Use the setter returned by useState.
• Use functional updates when the next value depends on the previous value.
• Do not assume that a state setter changes the variable immediately within the same render.
• Keep state as close as practical to the components that need it, lifting it to a parent when multiple components must share it.

5. Functional Components and Event Handling

Functional components can respond to user interactions through event-handler props. In React Native, common interaction handlers include onPress, onChangeText, and onValueChange, depending on the component.

5.1 Example: Button Interaction

import React, { useState } from 'react';
import { View, Text, Pressable } from 'react-native';

function MessageButton() {
  const [message, setMessage] = useState('Press the button');

  return (
    <View>
      <Text>{message}</Text>
      <Pressable
        onPress={() => setMessage('Button pressed successfully!')}
      >
        <Text>Press Me</Text>
      </Pressable>
    </View>
  );
}

export default MessageButton;

When the user presses the button, the event handler updates the message. React then renders the new text.

5.2 Common Event Handlers

6. Introduction to Component Composition

Component composition is the practice of combining smaller components to create a larger user interface. Rather than building an entire screen inside one large component, developers divide the screen into smaller, focused components and assemble them together.

For example, a profile screen may contain a profile header, profile image, user details, action buttons, and a navigation section. Each part can be implemented as a separate component and then combined inside the main screen component.

6.1 Definition

Component composition is a design technique in which a component uses other components to form a complete UI. It encourages separation of responsibilities, reusability, and maintainable application structure.

6.2 Example of Composition

import React from 'react';
import { View, Text } from 'react-native';

function Header() {
  return <Text>My Application</Text>;
}

function Content() {
  return <Text>Welcome to the home screen.</Text>;
}

function Footer() {
  return <Text>Copyright 2026</Text>;
}

function HomeScreen() {
  return (
    <View>
      <Header />
      <Content />
      <Footer />
    </View>
  );
}

export default HomeScreen;

The HomeScreen component combines the Header, Content, and Footer components. Each component has a separate responsibility, making the screen easier to understand and update.

7. Why Component Composition Is Important

7.1 Reusability

A component can be reused across several screens. For example, a shared header component can be used on the home, profile, and settings screens.

7.2 Maintainability

When a component has a clearly defined purpose, changes can often be made in one place rather than in multiple sections of the application.

7.3 Readability

Composition keeps large screens from becoming difficult-to-read blocks of JSX. Meaningful component names make the structure of the interface easier to understand.

7.4 Testability

Smaller components with focused behavior are often easier to test independently. For example, a reusable button can be tested separately from the screen that uses it.

7.5 Consistency

Shared components help keep design patterns, spacing, labels, and interactions consistent throughout an application.

7.6 Collaboration

When component boundaries and responsibilities are clear, multiple developers can work on separate UI parts with fewer conflicts.

8. Parent and Child Components

In a component hierarchy, a parent component renders one or more child components. The parent can pass information and callback functions to its children through props.

8.1 Parent Component Example

import React from 'react';
import { View, Text } from 'react-native';

function UserDetails({ name, city }) {
  return (
    <View>
      <Text>Name: {name}</Text>
      <Text>City: {city}</Text>
    </View>
  );
}

function ProfileScreen() {
  return (
    <View>
      <Text>User Profile</Text>
      <UserDetails name="Asha" city="Mumbai" />
    </View>
  );
}

export default ProfileScreen;

8.2 Understanding the Relationship

• ProfileScreen is the parent component in this example.
• UserDetails is a child component rendered by the parent.
• The parent passes name and city as props.
• The child uses those props to display the supplied information.

8.3 Component Hierarchy

App
└── ProfileScreen
    ├── ScreenTitle
    ├── ProfileImage
    ├── UserDetails
    └── ActionButtons
        ├── EditButton
        └── ShareButton

This hierarchy illustrates how a screen can be built from smaller, focused components. The actual structure of an application depends on its requirements.

9. Composition Through Props

Props are not limited to simple strings, numbers, or objects. A parent can also pass a component or JSX element as a prop. This makes a component more flexible because the parent can control what content appears inside it.

9.1 Example: Card with a Custom Title

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

function Card({ title, children }) {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>{title}</Text>
      {children}
    </View>
  );
}

function ProfileContent() {
  return (
    <Card title="Profile Information">
      <Text>Name: Asha Sharma</Text>
      <Text>Role: Developer</Text>
    </Card>
  );
}

const styles = StyleSheet.create({
  card: {
    padding: 16,
    margin: 16,
    borderRadius: 8,
    backgroundColor: '#f3f4f6',
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 8,
  },
});

export default ProfileContent;

9.2 What Is children?

The special children prop represents the content placed between a component's opening and closing tags. In the example, the two Text components are passed as children to Card.

This pattern allows the same card component to contain different content in different places.

9.3 When to Use children

• Reusable card containers.
• Custom layouts and panels.
• Reusable modal or dialog content.
• Common screen sections with variable inner content.
• Components that provide shared layout or styling around other components.

10. Functional Components vs Class Components

React supports both function components and class components. Function components are generally preferred for new development because they work with hooks and offer a concise way to organize UI logic.

11. Functional Components with useEffect

The useEffect hook is used when a component needs to synchronize with an external system, such as a subscription, timer, or network connection. It can also be used for fetching data, although the correct approach depends on the app's architecture and data-fetching requirements.

11.1 Basic Example

import React, { useEffect } from 'react';
import { View, Text } from 'react-native';

function ExampleScreen() {
  useEffect(() => {
    console.log('Effect setup');

    return () => {
      console.log('Effect cleanup');
    };
  }, []);

  return (
    <View>
      <Text>Example Screen</Text>
    </View>
  );
}

export default ExampleScreen;

11.2 Explanation

• useEffect runs an effect after React commits a render, according to its dependency list.
• The empty dependency array means the effect does not rerun for ordinary updates with changed dependencies because there are none.
• The cleanup function runs when the component is removed and before the effect is set up again when dependencies change.
• Development Strict Mode may perform an additional setup and cleanup cycle to help reveal unsafe effects.

11.3 Common Uses of useEffect

• Subscribing to events or external data sources.
• Setting up and cleaning up timers.
• Synchronizing with an external system.
• Managing connections that require cleanup.

Do not use effects for every calculation. Values that can be calculated directly from props or state during rendering generally do not need an effect.

12. Creating Reusable UI Components

A reusable component is designed to work in multiple places, usually by accepting props for the data or behavior that differs between uses.

12.1 Example: Reusable Primary Button

import React from 'react';
import { Pressable, Text, StyleSheet } from 'react-native';

function PrimaryButton({ title, onPress, disabled = false }) {
  return (
    <Pressable
      style={[styles.button, disabled && styles.disabled]}
      onPress={onPress}
      disabled={disabled}
      accessibilityRole="button"
    >
      <Text style={styles.buttonText}>{title}</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    padding: 14,
    borderRadius: 8,
    backgroundColor: '#2563eb',
    alignItems: 'center',
  },
  disabled: {
    opacity: 0.5,
  },
  buttonText: {
    color: '#ffffff',
    fontWeight: 'bold',
  },
});

export default PrimaryButton;

12.2 Using the Button

import React from 'react';
import { View, Alert } from 'react-native';
import PrimaryButton from './PrimaryButton';

function LoginScreen() {
  return (
    <View>
      <PrimaryButton
        title="Log In"
        onPress={() => Alert.alert('Login', 'Login selected')}
      />
      <PrimaryButton
        title="Continue"
        onPress={() => Alert.alert('Continue', 'Continue selected')}
      />
    </View>
  );
}

export default LoginScreen;

The same PrimaryButton component is used twice with different titles and event handlers. This avoids duplicating the button's styling and structure.

13. Component Composition in a React Native Screen

A screen can be created by composing a title, a reusable information card, and a reusable button. This is a common approach to organizing mobile application interfaces.

13.1 Example: Student Dashboard

import React from 'react';
import { View, Text, StyleSheet, Pressable } from 'react-native';

function DashboardHeader({ studentName }) {
  return (
    <View style={styles.header}>
      <Text style={styles.heading}>Student Dashboard</Text>
      <Text>Welcome, {studentName}</Text>
    </View>
  );
}

function CourseCard({ courseName, progress }) {
  return (
    <View style={styles.card}>
      <Text style={styles.courseName}>{courseName}</Text>
      <Text>Progress: {progress}%</Text>
    </View>
  );
}

function DashboardAction({ title, onPress }) {
  return (
    <Pressable style={styles.button} onPress={onPress}>
      <Text style={styles.buttonText}>{title}</Text>
    </Pressable>
  );
}

function StudentDashboard() {
  return (
    <View style={styles.container}>
      <DashboardHeader studentName="Asha" />
      <CourseCard courseName="React Native" progress={60} />
      <CourseCard courseName="JavaScript" progress={80} />
      <DashboardAction
        title="View Courses"
        onPress={() => console.log('View Courses pressed')}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#f9fafb',
  },
  header: {
    marginBottom: 16,
  },
  heading: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  card: {
    padding: 16,
    marginBottom: 12,
    backgroundColor: '#ffffff',
    borderRadius: 8,
  },
  courseName: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 6,
  },
  button: {
    padding: 14,
    alignItems: 'center',
    borderRadius: 8,
    backgroundColor: '#2563eb',
  },
  buttonText: {
    color: '#ffffff',
    fontWeight: 'bold',
  },
});

export default StudentDashboard;

13.2 What This Example Demonstrates

• StudentDashboard is the main screen component.
• DashboardHeader displays the student's welcome message.
• CourseCard displays course information and progress.
• DashboardAction provides a reusable action button.
• Props make the cards and header configurable.
• Composition brings all the individual components together into one screen.

14. Rendering Lists of Reusable Components

When an application needs to display multiple items, a data array can be transformed into reusable components. For longer or changing lists in React Native, FlatList is often preferable because it supports efficient list rendering.

14.1 Example with map()

import React from 'react';
import { View, Text } from 'react-native';

const courses = [
  { id: '1', name: 'React Native', duration: '8 Weeks' },
  { id: '2', name: 'JavaScript', duration: '6 Weeks' },
  { id: '3', name: 'UI Design', duration: '5 Weeks' },
];

function CourseItem({ name, duration }) {
  return (
    <View>
      <Text>{name}</Text>
      <Text>Duration: {duration}</Text>
    </View>
  );
}

function CourseList() {
  return (
    <View>
      {courses.map(course => (
        <CourseItem
          key={course.id}
          name={course.name}
          duration={course.duration}
        />
      ))}
    </View>
  );
}

export default CourseList;

14.2 Why Are Keys Required?

The key prop helps React identify list items between renders. A stable, unique identifier from the data is usually the best choice.

• Use unique keys among sibling list elements.
• Prefer stable IDs over array indexes when the list can change.
• Avoid generating a new random key on every render.
• Remember that key is reserved by React and is not received as an ordinary component prop.

15. Component Composition Patterns

15.1 Container and Presentational Components

In this design pattern, a container or screen component coordinates data and behavior, while presentational components primarily display the information they receive. It is a useful organizational approach, not a strict React requirement.

Example:

• Container: Loads course data and handles loading or error states.
• Presentational component: Displays one course's title, duration, and description.

15.2 Layout Components

Layout components provide common structure around other components. Examples include cards, page sections, headers, and reusable containers.

15.3 Composition with children

A wrapper component can accept nested elements through children, allowing parent components to provide custom content within a shared layout.

15.4 Shared UI Components

Components such as buttons, form fields, loading indicators, and error messages can be shared across multiple screens to improve consistency.

16. Functional Component Best Practices

• Keep functions focused: Give each component a clear purpose.
• Use descriptive names: Prefer names such as ProductCard over unclear abbreviations.
• Keep props predictable: Pass only the values and callbacks the component needs.
• Avoid excessive nesting: Extract meaningful sections into separate components when doing so improves clarity.
• Keep state close to where it is needed: Move it upward when multiple components must share it.
• Avoid direct mutation: Update state through setters and treat props as read-only.
• Use hooks correctly: Call hooks at the top level of function components or custom hooks.
• Separate reusable logic: Consider custom hooks when the same stateful behavior is needed in several places.
• Use stable keys: Supply meaningful keys for rendered collections.
• Handle different UI states: Consider loading, empty, success, and error conditions.
• Support accessibility: Provide suitable labels and interaction roles for accessible controls.
• Test behavior: Check that components display the correct data and respond properly to user interactions.

17. Common Mistakes and Troubleshooting

18. Mini Project: Reusable Product Catalogue

Create a simple product catalogue using functional components and component composition. The goal is to practise props, list rendering, reusable cards, and screen organization.

18.1 Project Requirements

• Create a main screen named ProductCatalogueScreen.
• Create a reusable ProductCard component.
• Pass product name, price, and category through props.
• Store sample products in an array.
• Render the products using map() or FlatList.
• Create a reusable PrimaryButton component for an action such as View Details.
• Use consistent styles for all product cards.
• Test the screen on an Android or iOS simulator or device.

18.2 Sample Product Data

const products = [
  { id: '1', name: 'Wireless Headphones', price: 2499, category: 'Electronics' },
  { id: '2', name: 'Travel Backpack', price: 1599, category: 'Accessories' },
  { id: '3', name: 'Smart Watch', price: 3999, category: 'Electronics' },
];

18.3 Suggested Component Structure

App
└── ProductCatalogueScreen
    ├── ScreenHeader
    └── ProductList
        ├── ProductCard
        │   └── PrimaryButton
        ├── ProductCard
        │   └── PrimaryButton
        └── ProductCard
            └── PrimaryButton

18.4 Expected Learning Outcomes

After completing the project, learners should be able to define functional components, pass data through props, compose screens from smaller components, render lists with stable keys, handle interactions, and maintain a consistent UI.

19. Practice Exercises

1. Create a functional component named WelcomeScreen that displays a heading and a description.
2. Create a reusable ProfileCard component that accepts a person's name, role, and city.
3. Use the same ProfileCard component to display three different people.
4. Create a counter component using useState with Increase and Decrease buttons.
5. Create a PrimaryButton component that accepts title and onPress props.
6. Create a Card component that renders nested content using children.
7. Build a dashboard by composing a header, information cards, and action buttons.
8. Render an array of courses using map() and stable unique keys.
9. Separate a component into its own file and import it into another component.
10. Explain the difference between a functional component and component composition.

20. Interview Questions and Answers

Q1. What is a functional component in React?

Answer: A functional component is a JavaScript or TypeScript function that returns React elements describing the UI.

Q2. Why are functional components commonly used in React Native?

Answer: They offer a straightforward way to build reusable UI and work with hooks for state and other React features.

Q3. What are props?

Answer: Props are read-only inputs passed from a parent component to a child component.

Q4. What is state in a functional component?

Answer: State is data that can change over time and affect the rendered UI. The useState hook is commonly used to manage local state.

Q5. What is component composition?

Answer: Component composition is the practice of combining smaller components to build a larger interface.

Q6. What is the purpose of the children prop?

Answer: The children prop represents the content nested between a component's opening and closing tags.

Q7. What is the difference between props and state?

Answer: Props are supplied by a parent, while state is managed through React state mechanisms by the component or its state owner.

Q8. What is useState?

Answer: useState is a React hook that provides a state value and a setter function for updating that state.

Q9. What is useEffect used for?

Answer: useEffect synchronizes a component with external systems and supports cleanup when necessary.

Q10. Why should components be reusable?

Answer: Reusable components reduce duplication, improve consistency, and simplify maintenance.

Q11. What is a parent component?

Answer: A parent component renders child components and can pass data and callbacks to them through props.

Q12. What are the advantages of component composition?

Answer: It improves modularity, readability, reusability, testability, and consistency.

Q13. What is the purpose of keys in lists?

Answer: Keys help React identify items between renders and reconcile list changes correctly.

Q14. Can a functional component use hooks?

Answer: Yes. Function components can use hooks such as useState, useEffect, and useContext, subject to the Rules of Hooks.

Q15. What is the difference between React and React Native components?

Answer: React web applications commonly render HTML elements, whereas React Native applications use components such as View, Text, and Pressable to create mobile interfaces.

21. Quick Revision Checklist

• Understand the definition and purpose of functional components.
• Write a component using a JavaScript function.
• Use JSX to describe the UI.
• Pass values through props.
• Manage local state with useState.
• Handle user interactions through event-handler props.
• Understand the purpose of useEffect.
• Combine small components to build a complete screen.
• Use children for flexible nested content.
• Create reusable buttons, cards, and headers.
• Render arrays of components with stable keys.
• Keep component responsibilities clear.
• Follow the Rules of Hooks.
• Use React Native components and styles correctly.
• Test important UI states and user interactions.

22. Conclusion

Functional components and component composition are essential concepts in modern React Native development. Functional components define reusable pieces of UI, while composition allows those pieces to be combined into complete screens and application features.

Props allow components to receive data, state allows interfaces to respond to changing information, and hooks provide access to React functionality. By building small components with clear responsibilities and composing them thoughtfully, developers can create applications that are easier to maintain, test, and extend.

Practise by creating reusable cards, buttons, profile screens, dashboards, and product lists. These exercises provide a strong foundation for more advanced React Native topics such as navigation, API integration, forms, state management, and application architecture.

Continue Learning: Explore the React Native Training Course, visit the JustAcademy website, or register for a course demo.